<template>
  <view class="fu-checkbox-group">
    <slot></slot>
  </view>
</template>

<script>
import { toRef } from 'vue'

/**
 * fu-checkbox-group 复选框组组件
 * @description 复选框组，用于包裹checkbox组件
 * @property {Array} modelValue - 复选框组的值
 * @property {Number} min - 可被勾选的最小数量
 * @property {Number} max - 可被勾选的最大数量
 * @event {Function} update:modelValue - 值变化时触发
 * @event {Function} change - 值变化时触发
 */
export default {
  name: 'fu-checkbox-group',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: Infinity
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit }) {
    const checkboxGroup = {
      modelValue: toRef(props, 'modelValue'),
      handleCheckboxChange: (value) => {
        if (value.length < props.min || value.length > props.max) return
        emit('update:modelValue', value)
        emit('change', value)
      }
    }

    return {
      checkboxGroup
    }
  },
  provide() {
    return {
      checkboxGroup: this.checkboxGroup
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-checkbox-group {
  display: inline-block;
}
</style> 